<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中英文转换</title>
  <link rel="stylesheet" href="./lib/css/index.css">
  <link rel="stylesheet" href="./lib/css/mobile.css">
  <link rel="stylesheet" href="./lib/css/ipad.css">
  <link rel="stylesheet" href="./lib/css/pc.css">
  <style>
    [v-cloak] {
      display: none !important;
    }
    .drawer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0; /* 初始高度为0 */
      background-color: white;
      transition: height 0.3s ease;
      overflow: hidden;
    }
    .drawer-slider {
      height: 100%;
      cursor: ns-resize; /* 鼠标样式为上下箭头 */
    }
    .drawer-scroll {
      padding: 20px;
    }
  </style>
</head>
<script type="importmap">
  {
    "imports": {
      "vue": "./js/vue.mini.js"
    }
  }
</script>

<body>
  <div id="app" v-cloak>
    <div>
      <p>中英文互换</p>
      <button @click="switchLanguage('zh-CN')">中文</button>
      <button @click="switchLanguage('en-US')">English</button>
      <p>{{ messages.welcome }}</p>
      <div>
        <div>
          {{messages.component1?.name.titleBox.title}}
        </div>
        <div>
          <div>
            {{messages.component1?.subtitle}}
            <p>{{messages.component1?.name.titleBox.title2.title}}</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <p>屏幕方向：{{ orientation }}</p>
    </div>

    <div>
      <p>父子组件通信</p>
      <input type="text" @input="name=$event.target.value" placeholder="父组件输入框">
      <helloword @anniu="getMsg" :message="name" ref="helloword"></helloword>
      <mySwiper ref="mySwiper"></mySwiper>
      <div>
        <button @click="parentClick">父组件调用子组件的方法</button>
      </div>
    </div>
    --------------------<br />
    <button @click="isShowDrawer">isShowDrawer</button>
    <!-- 抽屉 -->
    <div class="drawer" ref="drawer" @mousedown="startDrag">
      <div class="drawer-slider" ref="slider">
        <div class="slider"></div>
      </div>
      <div class="drawer-scroll">
        <div class="drawer-scroll-title">
          Neighbourhoods
        </div>
      </div>
    </div>
  </div>

  <script type="module">
    import { createApp } from './utils/vue.mini.js';
    import { homeInit } from "./api/home.js"
    import helloword from "./components/HelloWord.js"
    import mySwiper from "./components/mySwiper.js"

    document.addEventListener('DOMContentLoaded', function () {
      createApp({
        components: {
          helloword,
          mySwiper,
        },
        data() {
          return {
            name: "111",
            language: 'en-US',
            messages: {},
            orientation: this.getOrientation(),
            isDrawer: true,
            drawerHeight: 0,
            startDragY: 0,
            isDragging: false,
            scrollImg: [
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg",
                text: "1",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦动态@2x (3).png",
                text: "2",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/01.jpg",
                text: "3",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/shear–celeste B@2x.png",
                text: "4",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/限定发售-图片@2x (1).png",
                text: "5",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦珍稀年份系列@2x (1).png",
                text: "6",
              },
              {
                src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦传奇系列@2x.png",
                text: "7",
              },
            ],
          };
        },
        computed: {
          welcomeMessage() {
            console.log(this.messages, `subtitlesubtitle`);

            return this.messages || '';
          }
        },
        methods: {
          isShowDrawer() {
            this.isDrawer = true
          },
          async switchLanguage(lang) {
            if (this.language === lang) return;

            this.language = lang;
            await this.loadMessages(lang);
          },
          async loadMessages(lang) {
            try {
              const response = await fetch(`/lib/json/lang-${lang}.json?v=${new Date().getTime()}`);
              const data = await response.json();
              console.log(data, `datadata`);

              this.messages = data;
            } catch (error) {
              console.log(error);
            }
          },

          getOrientation() {
            return window.innerWidth > window.innerHeight ? '横屏2' : '竖屏2';
          },
          handleResize() {
            this.orientation = this.getOrientation();
          },

          getMsg(e) {
            console.log(`接受子组件的入参:`, e);
          },

          async parentClick() {
            homeInit()
            return;
            try {
              const response = await fetch(`https://res.moncler.cn/morefun/genius/floor.json`, { mode: 'no-cors' });
              console.log(response, `response`);

              const data = await response.json();
              console.log(data, `data`);


            } catch (error) {
              console.log(error);
            }

            return
            this.$refs.helloword.anniu('父组件调用子组件的方法');
          },

          startDrag(event) {
            this.startDragY = event.clientY;
            this.isDragging = true;
            document.addEventListener('mousemove', this.drag);
            document.addEventListener('mouseup', this.endDrag);
          },

          drag(event) {
            if (!this.isDragging) return;

            const deltaY = event.clientY - this.startDragY;
            const newHeight = Math.max(0, Math.min(window.innerHeight, deltaY));
            this.drawerHeight = newHeight;
          },

          endDrag() {
            this.isDragging = false;
            document.removeEventListener('mousemove', this.drag);
            document.removeEventListener('mouseup', this.endDrag);
          },
        },
        mounted() {
          alert("屏幕分辨率的高：" + window.screen.height + `---屏幕可用工作区高度：` + screen.availHeight + "---浏览器窗口可视高度：" + window.innerHeight);

          this.loadMessages(this.language);
          window.addEventListener('resize', this.handleResize);
        },
      }).mount('#app')
    })
  </script>
</body>

</html>